<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 背景与边框 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders -->


    <!-- 背景颜色 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2 -->
    <!-- background-color属性定义了CSS中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。 -->
    <!-- background-color -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color -->
    <!-- CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一. -->
    <div style="background-color: teal; color: white;">
        Lorem ipsum dolor sit amet, consectetuer
    </div>
    <div style="background-color: rgb(153,102,153); color: rgb(255,255,204);">
        Lorem ipsum dolor sit amet, consectetuer
    </div>
    <div style="background-color: #777799; color: #FFFFFF;">
        Lorem ipsum dolor sit amet, consectetuer
    </div>

    <hr>


    <!-- 背景图片 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87 -->
    <!-- background-image属性允许在元素的背景中显示图像。 -->
    <!-- background-image -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image -->
    <!-- CSS background-image 属性用于为一个元素设置一个或者多个背景图像。 -->
    <!-- background-size -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size -->
    <div style="height: 5em; background-image: url(img12.jpg); background-size: 20%;">
        background-image
    </div>

    <hr>

    <!-- 使用background 的简写 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#%E4%BD%BF%E7%94%A8background_%E7%9A%84%E7%AE%80%E5%86%99 -->
    <!-- background -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background -->
    <!-- background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。 -->
    <p style="height: 3em; background: url(ver.ico) #99f repeat-y fixed;">Here is a
        paragraph
    <p>

</body>

</html>